<template>
	
	<view class="page">
		
		<!-- 导航栏 -->
		<uni-nav-bar left-icon="back" @clickLeft="back()" background-color="#e60012" color="#fff" fixed="true" statusBar="false" title="">
			
			<view class="detail-title">
				<input type="text"  v-model="keyword" confirm-type="search" placeholder="商品名称" @confirm="search()" />
				<view class="search-btn"  @tap="search()">搜索</view>
			</view>
		</uni-nav-bar>

		
		<view class="sort">
			<view class="left">
				<picker class="picker-item item" :value="typeIndex" mode="selector" :range="typeList" range-key="name" @change="objChange">
					<view>{{typeList[typeIndex]['name']}}
					<uni-icon type="arrowdown" size="20" color="#999"></uni-icon></view>
				</picker>
				<view class="item" @tap="selectSort(item, index)" :class="searchIndex == index ? 'active': ''" v-for="(item, index) in typeList[typeIndex]['search']" :key="index">
					
					{{item.name}}
					<uni-icon :type="searchItemIndex == 0 ? item.down_icon: item.up_icon" size="20" v-if="searchIndex == index" ></uni-icon>
				</view>
			</view>
			<view class="right" @click="changeShowType()">
				<uni-icon type="list"></uni-icon>
			</view>
		</view>
		
		<goods-list :goods="goodsList" :show-type="showType" :goods-type="typeList[typeIndex]['value']"></goods-list>
		
	</view>
</template>

<script>
	import UniNavBar from '../../components/uni-nav-bar.vue';
	import UniIcon from '../../components/uni-icon.vue';
	import base from '../../common/base.js';
	import goodsList from '../../components/coupon-goods-list.vue';
	import Request from '../../common/request.js';
	
	export default {
		components: {
			UniNavBar, UniIcon, goodsList
		},
		
		data() {
			return {
				typeList: [
					{
						value: 'tbk', 
						name: '淘宝/天猫',
						search: [
							
								{
									name: '销量',
									down_icon: 'arrowdown',
									down_value: 'total_sales_des',
									up_icon: 'arrowup',
									up_value: 'total_sales_asc',
								},
								{
									name: '价格',
									down_icon: 'arrowdown',
									down_value: 'price_des',
									up_icon: 'arrowup',
									up_value: 'price_asc'
								},
								{
									name: '佣金',
									down_icon: 'arrowdown',
									down_value: 'tk_rate_des',
									up_icon: 'arrowup',
									up_value: 'tk_rate_asc'
								}
							
						]
					},
					{
						value: 'jd', 
						name: '京东',
						search: [
							
						]
					},
					{
						value: 'pdd', 
						name: '拼多多',
						search: [
							{
								name: '销量',
								down_icon: 'arrowdown',
								down_value: '6',
								up_icon: 'arrowup',
								up_value: '5',
							},
							{
								name: '价格',
								down_icon: 'arrowdown',
								down_value: '4',
								up_icon: 'arrowup',
								up_value: '3'
							},
							{
								name: '佣金',
								down_icon: 'arrowdown',
								down_value: '2',
								up_icon: 'arrowup',
								up_value: '1',
								
							}
						
						]
					}
				],
				typeIndex: 0,
				goodsList: [],
				page: 1,
				nextPage: true,
				keyword: '',
				searchIndex: -1,
				searchItemIndex: 0,
				sortType: '',
				showType: 1,
			}
		},
		
		onLoad(options) {
			this.typeIndex = options.type_index? parseInt(options.type_index):0;
			if(options.keyword) {
				this.keyword = options.keyword;
				this.search();
			}
			
		},
		onReachBottom:function(){
			var searchType = this.typeList[this.typeIndex]['value'];
		
			switch (searchType){
				case 'tbk':
					this.tbkSearch();
					break;
				case 'jd':
					this.jdSearch();
					break;
				case 'pdd':
					this.pddSearch();
					break;
				default:
					break;
			}
		},
		methods: {
			//搜索
			search: function(){
				if(!this.keyword) {
					uni.showModal({
						title:'提示',
						content:'请输入商品名称',
						showCancel: false
					})
					return;
				}
				var searchType = this.typeList[this.typeIndex]['value'];
				this.goodsList = [];
				this.page = 1;
				this.nextPage = 1;
				switch (searchType){
					case 'tbk':
						this.tbkSearch();
						break;
					case 'jd':
						this.jdSearch();
						break;
					case 'pdd':
						this.pddSearch();
						break;
					default:
						break;
				}
			},
			//选择类型
					
			objChange(evt) {
				
				this.typeIndex = evt.detail.value;
				this.searchIndex = -1;
				this.searchItemIndex = 0;
				if(this.keyword != '') {
					this.search();
				}
			},
			//淘宝客搜索
			tbkSearch: function(){
				if(this.nextPage == false){
					return false;
				}
				var that = this;
				var params = {
					url: 'tbk/dgMaterialOptional',
					data: {
						keyword: that.keyword,
						page: that.page,
						sort: that.sortType
					},
					sCallback: function(res) {
						// console.log(res);
						
							that.goodsList = that.goodsList.concat(res.data);
							that.page ++; 
							if(res.data.length < 20) {
								that.nextPage = false
							}
						
						
					}
				}
				Request.send(params);
			},
			//京东搜索
			jdSearch: function(){
				if(this.nextPage == false){
					return false;
				}
				var keyword = this.keyword;
				var that = this;
				var params = {
					url: 'jd/search',
					data: {page: that.page, keyword:keyword},
					sCallback: function(res) {
						that.goodsList = that.goodsList.concat(res.data);
						that.page ++; 
						if(res.data.length < 20){
							that.nextPage = false
						}
					}
				}
				Request.send(params);
			},
			//拼多多搜索
			pddSearch: function(){
				if(this.nextPage == false){
					return false;
				}
				var keyword = this.keyword;
				var that = this;
				var params = {
					url: 'pdd/goodsList',
					data: {page: that.page, keyword:keyword, sort: that.sortType},
					sCallback: function(res) {
						
							that.goodsList = that.goodsList.concat(res.data);
							that.page ++; 
							if(res.data.length < 20) {
								that.nextPage = false
							}
				
						
						
					}
				}
				Request.send(params);
			},
			//选择排序方式
			selectSort: function(item, index){
				if(this.searchIndex == index){
					this.searchItemIndex = this.searchItemIndex == 1 ? 0 : 1;
				} else {
					this.searchItemIndex = 0;
				}
				
				if(this.searchItemIndex == 0) {
					this.sortType = this.typeList[this.typeIndex]['search'][index]['down_value'];
				} else {
					this.sortType = this.typeList[this.typeIndex]['search'][index]['up_value'];
				}
				
				console.log(this.sortType);
				this.searchIndex = index;
				this.search();
			},
			//更改显示方式
			changeShowType: function(){
				this.showType = this.showType == 1 ? 2: 1;
			},
			back() {
				uni.navigateBack({
					
				})
			}
		}
	}
</script>

<style>
	
	view{
		display: flex;
		font-size: 26upx;
	}
	.page{
		flex-direction: column;
		background: #f5f5f5;
		padding-top: 158upx;
		width: ;
	}
	
	
	.detail-title{
		margin-top: 14upx;
		flex: 1;
		height: 60upx;
		background: #fff;
		border-radius: 30upx;
		align-items: center;
		margin-right: 30upx;
		box-sizing: border-box;
	}

	.detail-title input{
		flex: 1;
		padding-left: 20upx;
		color: #FA4DBE;
	}
	
	.detail-title .search-btn{
		color: #fff;
		background: #FFB925;
		height: 60upx;
		line-height: 60upx;
		padding: 0 40upx;
		border-radius: 30upx;
	}
	
	.sort{
		width: 750upx;
		background: #fff;
		border-bottom: 1upx solid #eee;
		box-sizing: border-box;
		position: fixed;
		top: 88upx;
		left: 0;
		z-index: 99;
	}
	
	.sort .right{
		width: 80upx;
		justify-content: center;
		align-items: center;
		color: #999;
	}
	
	.sort .left{
		flex: 1;
	}
	
	.sort .item{
		display: flex;
		height: 70upx;
		align-items: center;
		flex: 1;
		justify-content: center;
		color: #666;
		font-size: 24upx;
	}
	
	.sort .item.active{
		color: #FA4DBE;
	}

</style>
